import React, { Component } from 'react';
import { Form, Input, Button, Popover } from 'antd';

const FormItem = Form.Item;

class CheckRemark extends Component {
  constructor() {
    super();
    this.state = {
      visible: false,
    };
  }

  toggleVisible() {
    this.setState({ visible: !this.state.visible }, () => {
      setTimeout(() => { this.props.form.resetFields(['checkRemark']); }, '');
    });
  }

	submit(outerOrderId) {
    const { form,page } = this.props;
    form.validateFields((err, values) => {
      if (err) return;
      this.toggleVisible();
      this.props.dispatch({
        type: 'order/updateCheckRemark',
        payload: { ...values, id: outerOrderId },
      });
    });
    this.props.handleSubmit(null, page);
  }
	
  render() {
    const { record, form } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Popover
        	content={<Form>
		          <FormItem
		            label="异常原因"
		            labelCol={{ span: 8 }}
		            wrapperCol={{ span: 16 }}
		          >
		            {getFieldDecorator('checkRemark', {
		            })(
		              <Input placeholder="请输入" />,
		            )}
		          </FormItem>
		          <Button size="small" type="primary" onClick={this.submit.bind(this,record.id)}>保存</Button>
		        </Form>} title="修改异常备注" trigger="click" visible={this.state.visible} onVisibleChange={this.toggleVisible.bind(this)}>
          <a href="javascript:void(0)" style={{ margin: '0 10px' }} >异常备注</a>
        </Popover>
    );
  }
}

export default Form.create()(CheckRemark);
